<template>
  <div class="item">
    <p>
      <span v-show="!isActive" v-on:click="activeItem"> {{item}} </span>
      <!-- 展示数据 -->
      <span v-show="isActive" class="right">
        <input v-model="content" v-on:blur="inactiveItem" type="text" />
        <!-- 修改数据输入框 -->
      </span>
      <!-- 这个emit对应了 v-on 标签前面的监听事件 -->
      <!-- <span v-on:click="deleteItemC(index)" class="red">XXX</span> -->
      <el-button v-on:click="deleteItemC(index)" style="margin-left: 20px;"  type="primary" plain>删除</el-button>
      <!-- 删除按钮 -->
    </p>

  </div>
</template>
<script>
export default {
  name: 'todoListItem',
  // props: ['item','index'],//接收父组件传入的 item和index
  props: {
    'item': '',
    'index' :'',
  },
  data() {
   return {
     content : '',
     isActive : false,//是否展示输入框内容
   }
  },
  methods: {
    activeItem() {
      this.isActive = true;
      this.content = this.item;//给input输入框赋值
    },
    inactiveItem() {
      this.$emit('modifyItem', this.content, this.index);
      this.isActive = false;//关闭激活状态
    },
    // 这个index是父组件传过来的
    deleteItemC(index) {
      this.$emit('deleteItem', index)
    }
  }
 
}
</script>
<style scoped>
  .item{
    margin: 5px;
  }
  .red{
    margin: 25px;
    color: brown;
    width: 20%;
    border: 1px solid #121212;
    cursor: pointer;
    /* 左上箭头效果 */
  }
  .right {
    margin-right: 10px;
    padding-right: 20px;
  }
</style>